From 5b27130d60e2b294cc364085e283de93d5e8d2af Mon Sep 17 00:00:00 2001
From: Frank <frank@sst.dev>
Date: Fri, 10 Oct 2025 20:16:44 -0400
Subject: wip: zen

---
 .../app/src/routes/workspace/[id]/index.tsx        | 50 ++++++++++++++++++----
 1 file changed, 42 insertions(+), 8 deletions(-)

(limited to 'packages/console/app/src/routes/workspace/[id]')

diff --git a/packages/console/app/src/routes/workspace/[id]/index.tsx b/packages/console/app/src/routes/workspace/[id]/index.tsx
index 6e0aa70e0..7f196e45d 100644
--- a/packages/console/app/src/routes/workspace/[id]/index.tsx
+++ b/packages/console/app/src/routes/workspace/[id]/index.tsx
@@ -3,24 +3,58 @@ import { UsageSection } from "./usage-section"
 import { ModelSection } from "./model-section"
 import { ProviderSection } from "./provider-section"
 import { IconLogo } from "~/component/icon"
-import { createAsync, useParams } from "@solidjs/router"
-import { querySessionInfo } from "../common"
-import { Show } from "solid-js"
+import { createAsync, useParams, useAction, useSubmission } from "@solidjs/router"
+import { querySessionInfo, queryBillingInfo, createCheckoutUrl } from "../common"
+import { Show, createMemo } from "solid-js"
 
 export default function () {
   const params = useParams()
   const userInfo = createAsync(() => querySessionInfo(params.id))
+  const billingInfo = createAsync(() => queryBillingInfo(params.id))
+  const createCheckoutUrlAction = useAction(createCheckoutUrl)
+  const createCheckoutUrlSubmission = useSubmission(createCheckoutUrl)
+
+  const balanceAmount = createMemo(() => {
+    return ((billingInfo()?.balance ?? 0) / 100000000).toFixed(2)
+  })
 
   return (
     <div data-page="workspace-[id]">
       <section data-component="header-section">
         <IconLogo />
         <p>
-          Curated list of models provided by opencode.{" "}
-          <a target="_blank" href="/docs/zen">
-            Learn more
-          </a>
-          .
+          <span>
+            Reliable optimized models for coding agents.{" "}
+            <a target="_blank" href="/docs/zen">
+              Learn more
+            </a>
+            .
+          </span>
+          <span data-slot="billing-info">
+            <Show
+              when={billingInfo()?.reload}
+              fallback={
+                <button
+                  data-color="primary"
+                  data-size="sm"
+                  disabled={createCheckoutUrlSubmission.pending}
+                  onClick={async () => {
+                    const baseUrl = window.location.href
+                    const checkoutUrl = await createCheckoutUrlAction(params.id, baseUrl, baseUrl)
+                    if (checkoutUrl) {
+                      window.location.href = checkoutUrl
+                    }
+                  }}
+                >
+                  {createCheckoutUrlSubmission.pending ? "Loading..." : "Enable billing"}
+                </button>
+              }
+            >
+              <span data-slot="balance">
+                Current balance: <b>${balanceAmount() === "-0.00" ? "0.00" : balanceAmount()}</b>
+              </span>
+            </Show>
+          </span>
         </p>
       </section>
 
-- 
cgit v1.2.3